<template>
    <div id="management">
        <div class="selfContent">
            <h1 class="content_h1">后台管理</h1>
            <!-- 初步决定是将内容作为选项卡的形式 -->
            <div class="content_select_card">
                <div class="tab-hd">
		            <a href="javascript:;" :class="{'now':index==1}" @click="index=1"><span>用户管理</span></a>
		            <a href="javascript:;" :class="{'now':index==2}" @click="index=2"><span>资源管理</span></a>
		            <a href="javascript:;" :class="{'now':index==3}" @click="index=3"><span>标签管理</span></a>
	            </div>
	            <div class="tab-bd">
		            <div class="tab-item" v-show="index==1">
                        <div class="my_video">
                            <span><h2>用户信息</h2><input type="button" value="新加"></span>
                            <table class="userinfo-table">  
                                <tr class="userinfo-tr1">
                                    <th>编号</th>
                                    <th>用户账号</th>
                                    <th>用户名</th>
                                    <th>用户权限</th>
                                    <th>用户电话</th>
                                    <th>用户邮箱</th>
                                    <th>用户简介</th>
                                    <th>执行操作</th>
                                </tr>
                                <tbody class="userinfo-tbody">
                                <tr class="userinfo-tr2" v-for="(user,index) in userInformation" :key="user.id">
                                    <td>{{user.id}}</td>
                                    <td>{{user.userAccount}}</td>
                                    <td>{{user.userName}}</td>
                                    <td>{{user.userPower}}</td>
                                    <td>{{user.userPhone}}</td>
                                    <td>{{user.userEmail}}</td>
                                    <td>{{user.userProfile}}</td>
                                    <td><input type="button" value="修改" @click="updataUserData(user,$event)"><input type="button" value="删除" @click="delUserSingleTr(user,index)"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
		            <div class="tab-item" v-show="index==2">
                        <div class="my_video">
                            <span><h2>资源信息</h2></span>
                            <table class="userinfo-table">  
                                <tr class="userinfo-tr1">
                                    <th>编号</th>
                                    <th>资源ID</th>
                                    <th>上传用户（账号）</th>
                                    <th>资源标题</th>
                                    <th>资源文件地址</th>
                                    <th>资源类别</th>
                                    <th>资源封面地址</th>
                                    <th>所属标签名-1</th>
                                    <th>所属标签名-2</th>
                                    <th>所属标签名-3</th>
                                    <th>所属标签名-4</th>
                                    <th>所属标签名-5</th>
                                </tr>
                                <tbody class="userinfo-tbody">
                                <tr class="userinfo-tr2" v-for="(resource,index) in resourceInformation" :key="resource.id">
                                    <td>{{resource.id}}</td>
                                    <td>{{resource.resourceId}}</td>
                                    <td>{{resource.userName}}</td>
                                    <td>{{resource.resourceTitle}}</td>
                                    <td>{{resource.resourceUrl}}</td>
                                    <td>{{resource.resourceCategory}}</td>
                                    <td>{{resource.resourceCover}}</td>
                                    <td>{{resource.tag1Name}}</td>
                                    <td>{{resource.tag2Name}}</td>
                                    <td>{{resource.tag3Name}}</td>
                                    <td>{{resource.tag4Name}}</td>
                                    <td>{{resource.tag5Name}}</td>
                                    <td><input type="button" value="修改" @click="updataResourceData(resource,$event)"><input type="button" value="删除" @click="delResourceSingleTr(resource,index)"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
		            <div class="tab-item" v-show="index==3">333</div>
	            </div>
            </div>
        </div>
        <!-- 修改用户信息 -->
        <div class="updateUserInfo" v-show="showUserUpdatePage">
            <div class="updateDiv">
                <h2 style="color:cornflowerblue">修改用户信息</h2>
                <hr>
                <span><p>用户账户</p><input type="text" value="" v-model="updateUserAccount"></span>
                <span><p>用户名</p><input type="text" value="" v-model="updateUserName"></span>
                <span><p>用户权限</p><input type="text" value="" v-model="updateUserPower"></span>
                <span><p>用户简介</p><input type="text" value="" v-model="updateUserProfile"></span>
            </div>
            <div class="updateButton">
            <input type="button" value="取消" @click="cancleUpdateUserInfo()"><input type="button" value="确认修改" @click="updateUserInfo()">
            </div>
        </div>
        <!-- 修改资源信息 -->
        <div class="updateResourceInfo" v-show="showResourceUpdatePage">
            <div class="updateDiv">
                <h2 style="color:cornflowerblue">修改资源信息</h2>
                <hr>
                <span><p>资源标题</p><input type="text" value="" v-model="updateResourceTitle"></span>
                <span><p>资源文件地址</p><input type="text" value="" v-model="updateResourceUrl"></span>
                <span><p>资源类别</p><input type="text" value="" v-model="updateResourceCategory"></span>
                <span><p>资源封面地址</p><input type="text" value="" v-model="updateResourceCover"></span>
                <span><p>所属标签名-1</p><input type="text" value="" v-model="updateTagName1"></span>
                <span><p>所属标签名-2</p><input type="text" value="" v-model="updateTagName2"></span>
                <span><p>所属标签名-3</p><input type="text" value="" v-model="updateTagName3"></span>
                <span><p>所属标签名-4</p><input type="text" value="" v-model="updateTagName4"></span>
                <span><p>所属标签名-5</p><input type="text" value="" v-model="updateTagName5"></span>
            </div>
            <div class="updateButton">
            <input type="button" value="取消" @click="cancleUpdateResourceInfo()"><input type="button" value="确认修改" @click="updateResourceInfo()">
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            index:0,
            userInfo:[
                {id:'1',userAccount:'a',userName:'b',userPower:'c',userPhone:'d',userEmail:'e',userProfile:'f'},
                {id:'2',userAccount:'a',userName:'b',userPower:'c',userPhone:'d',userEmail:'e',userProfile:'f'},
                {id:'3',userAccount:'a',userName:'b',userPower:'c',userPhone:'d',userEmail:'e',userProfile:'f'},
            ],
            userInformation:[],
            resourceInformation:[],
            // id:'',
            // userAccount:'',
            // userName:'',
            // userPower:'',
            // userPhone:'',
            // userEmail:'',
            // userProfile:'',
            showUserUpdatePage:false,
            showResourceUpdatePage:false,
            //获取用户信息到修改用户信息的修改框
            updateUserAccount:'',
            updateUserName:'',
            updateUserPower:'',
            updateUserProfile:'',
            //获取资源信息到修改资源信息的修改框
            updateResourceId:'',
            updateResourceTitle:'',
            updateResourceUrl:'',
            updateResourceCategory:'',
            updateResourceCover:'',
            updateTagName1:'',
            updateTagName2:'',
            updateTagName3:'',
            updateTagName4:'',
            updateTagName5:''


        }
    },
    created(){
        this.getUserData();
        this.getResourceData();
    },
    methods:{
         //删除用户信息的某一行
        delUserSingleTr(user,index){
            //点击删除按钮后的confirm确认框
            var r=confirm("点击确认后数据将删除！无法找回！");
            if (r==true){
                alert("您确认了删除操作!");
                //这个地方因为是用了SSM_jy项目的数据库和接口，所以传递的数据是userAccount和userName
                let data = {'userAccount':user.userAccount,'userName':user.userName}
                // console.log(data)
                // console.log(user)
                // console.log(index)
                axios.post('http://localhost:8080/user/deleteuser',data).then((res)=>{
                    console.log(res)
                    if(res.data!=1){
                        alert("删除失败，请稍后重试")
                    }else{
                        alert("该用户已成功删除")
                        this.userInformation.splice(index,1)
                    }
                })
            }else{
                alert("您取消了删除操作!");
            }
        },
        //删除用户信息的某一行
        delResourceSingleTr(resource,index){
            //点击删除按钮后的confirm确认框
            var r=confirm("点击确认后数据将删除！无法找回！");
            if (r==true){
                alert("您确认了删除操作!");
                //这个地方因为是用了SSM_jy项目的数据库和接口，所以传递的数据是userAccount和userName
                let data = {'userAccount':user.userAccount,'userName':user.userName}
                // console.log(data)
                // console.log(user)
                // console.log(index)
                axios.post('http://localhost:8080/user/deleteuser',data).then((res)=>{
                    console.log(res)
                    if(res.data!=1){
                        alert("删除失败，请稍后重试")
                    }else{
                        alert("该资源已成功删除")
                        this.userInformation.splice(index,1)
                    }
                })
            }else{
                alert("您取消了删除操作!");
            }
        },
        //点击删除按钮后的confirm确认框
        showConfirm(user,index){
            var r=confirm("点击确认后数据将删除！无法找回！");
            if (r==true){
                alert("您确认了删除操作!");
            }else{
                alert("您取消了删除操作!");
            }
        },
        getUserData(){
            axios.get('http://localhost:8080/user/userlist').then((res)=>{
                console.log(res)
                this.userInformation=res.data
                console.log(this.userInfo)
                console.log(this.userInformation)
            })
        },
        getResourceData(){
            axios.get('http://localhost:8080/resource/maintoandroid').then((res)=>{
                console.log(res)
                this.resourceInformation=res.data
                console.log(this.userInfo)
                console.log(this.userInformation)
            })
        },
        /*
        修改用户信息的方法
        */
        updataUserData(e){
            console.log(e.target)
            this.showUserUpdatePage=true
        },
        //点击修改时，会同时把用户信息表格中的数据给到修改框中
        updataUserData(user,event){
            console.log(event.target)
            console.log(user)
            this.updateUserAccount=user.userAccount
            this.updateUserName=user.userName
            this.updateUserPower=user.userPower
            this.updateUserProfile=user.userProfile
            this.showUserUpdatePage=true
        },
        //cancle关闭修改用户的div
        cancleUpdateUserInfo(){
            this.showUserUpdatePage=false
        },
        //确认修改用户的div中的内容
        updateUserInfo(){
            if(this.updateUserAccount=="" || this.updateUserName=="" || this.updateUserPower=="" || this.updateUserProfile==""){
                alert("请先填入必要信息")
            }else{
                let data={'userAccount':this.updateUserAccount,'userName':this.updateUserName,'userPower':this.updateUserPower,'userProfile':this.updateUserProfile}
                axios.post('http://localhost:8080/user/backupdateuserinfo',data).then((res)=>{
                    if(res.data!=1){
                        alert("用户信息更新失败，请稍后重试")
                    }else{
                        alert("用户信息更新成功！刷新页面查看")
                        // this.showUpdatePage=false
                        // this.$router.push({path:'/managementPage'});
                    }
                })
            }
        },
                /*
        修改资源信息的方法
        */
        updataResourceData(e){
            console.log(e.target)
            this.showUserUpdatePage=true
        },
        //点击修改时，会同时把资源信息表格中的数据给到修改框中
        updataResourceData(resource,event){
            console.log(event.target)
            console.log(resource)
            this.updateResourceId=resource.resourceId
            this.updateResourceTitle=resource.resourceTitle
            this.updateResourceUrl=resource.resourceUrl
            this.updateResourceCategory=resource.resourceCategory
            this.updateResourceCover=resource.resourceCover
            this.updateTagName1=resource.tagName1
            this.updateTagName2=resource.tagName2
            this.updateTagName3=resource.tagName3
            this.updateTagName4=resource.tagName4
            this.updateTagName5=resource.tagName5
            this.showResourceUpdatePage=true
        },
        //cancle关闭修改资源的div
        cancleUpdateResourceInfo(){
            this.showResourceUpdatePage=false
        },
        //确认修改资源的div中的内容
        updateResourceInfo(){
            if(this.updateResourceTitle=="" || this.updateResourceUrl=="" || this.updateResourceCategory=="" 
            || this.updateResourceCover=="" || this.updateTagName1==""){
                alert("请先填入必要信息")
            }else{
                let data={'resourceId':this.updateResourceId,'resourceTitle':this.updateResourceTitle,'resourceUrl':this.updateResourceUrl,'resourceCategory':this.updateResourceCategory,'resourceCover':this.updateResourceCover,'tag1Name':this.updateTagName1,'tag2Name':this.updateTagName2,'tag3Name':this.updateTagName3,'tag4Name':this.updateTagName4,'tag5Name':this.updateTagName5}
                axios.post('http://localhost:8080/resource/backupdateresourceinfo',data).then((res)=>{
                    if(res.data!=1){
                        alert("用户信息更新失败，请稍后重试")
                    }else{
                        alert("用户信息更新成功！刷新页面查看")
                        // this.showUpdatePage=false
                        // this.$router.push({path:'/managementPage'});
                    }
                })
            }
        },
    }
}
</script>

<style scoped>
.selfContent{
    margin: 12px 0px 0px 0px;
    height: 100%;
    width: 75%;
    position: relative;
    left: 12.5%;
    border: 1px solid #dbd6d6;
    box-shadow:5px 5px 10px 5px #dbd6d6;
    /* border-bottom: 1px solid #0000; */
}
.tab-hd { position: relative; height:36px; margin:15px 0; border-bottom:1px solid #ddd;}
.tab-hd a { float:left; padding:8px 20px; margin-right:-1px; background: #fbfaf8; border:1px solid #ddd; text-decoration: none; color: black; }
.tab-hd a:hover { background: #fff; color: #4998df; }
.tab-hd .now { padding: 8px 20px 7px; border-top:2px solid #4998df; border-bottom:1px solid #fff; background: #fff; z-index: 2; }
.tab-item-span-a{text-decoration: none;color:#4998df; text-align: center;}
.tab-item-span-a:hover{color: rgb(233, 72, 139);}

.userinfo-table{
    width: 100%;
    height: 100%;
    border:2px solid #4998df;
    border-collapse:collapse;
}
.userinfo-tr1{
    background-color:gainsboro;
}
.userinfo-tbody tr{
    border:2px solid #4998df;
}
.userinfo-tr2 td{
    text-align: center;
    border:1px solid cornflowerblue;
}
.updateUserInfo{
    position:absolute;
    width: 400px;
    height: 500px;
    top: 20%;
    left: 35%;
    border: 2px solid cornflowerblue;
    background-color: #dbd6d6;
}
.updateUserInfo span{
    text-align: center;
    display: block;
}
.updateUserInfo input{
    width: 200px;
    height: 20px;
}
.updateResourceInfo{
    position:absolute;
    width: 600px;
    height: 800px;
    top: 20%;
    left: 30%;
    border: 2px solid cornflowerblue;
    background-color: #dbd6d6;
}
.updateResourceInfo span{
    text-align: center;
    display: block;
}
.updateResourceInfo input{
    width: 300px;
    height: 20px;
}
</style>
